<template>
  <div class="monitor-dashboard">
    <!-- 顶部标题 -->
    <header class="dashboard-header">
      <h1>四川省工业园区智慧环保平台</h1>
      <div class="current-time">{{ currentTime }}</div>
    </header>

    <div class="dashboard-content">
      <!-- 左侧面板 -->
      <section class="left-panel">
        <div class="panel-item aqi-info">
          <h3>实时监测数据</h3>
          <div class="aqi-value">{{ monitorData.aqi }}</div>
          <div class="aqi-details">
            <div class="detail-item" v-for="item in monitorData.details" :key="item.name">
              <span>{{ item.name }}</span>
              <span>{{ item.value }}</span>
            </div>
          </div>
        </div>
        
        <div class="panel-item pollution-chart">
          <h3>每日大气污染指数</h3>
          <div ref="pollutionChartRef" class="chart-container"></div>
        </div>

        <div class="panel-item index-chart">
          <h3>监测日指标变化</h3>
          <div ref="indexChartRef" class="chart-container"></div>
        </div>
      </section>

      <!-- 中间地图区域 -->
      <section class="map-container">
        <div ref="mapContainer" class="map"></div>
        <div class="map-controls">
          <button v-for="btn in mapControls" 
                  :key="btn.id" 
                  @click="handleMapControl(btn.id)">
            {{ btn.name }}
          </button>
        </div>
      </section>

      <!-- 右侧面板 -->
      <section class="right-panel">
        <div class="panel-item camera-views">
          <h3>监控画面</h3>
          <div class="camera-grid">
            <div v-for="(camera, index) in cameraData" 
                 :key="index" 
                 class="camera-item">
              <img :src="camera.url" :alt="camera.name">
            </div>
          </div>
        </div>

        <div class="panel-item trend-chart">
          <h3>监测趋势</h3>
          <div ref="trendChartRef" class="chart-container"></div>
        </div>

        <div class="panel-item composition-chart">
          <h3>资料构成分析</h3>
          <div ref="compositionChartRef" class="chart-container"></div>
        </div>
      </section>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import { useMonitorStore } from '@/stores/monitor'
import { initMap } from '@/utils/map'
import { initCharts } from '@/utils/charts'
import { AMAP_CONFIG, MAP_CONFIG } from '@/config/map'
import dayjs from 'dayjs'

// 状态初始化
const currentTime = ref(dayjs().format('YYYY-MM-DD HH:mm:ss'))
const monitorStore = useMonitorStore()
const mapContainer = ref<HTMLElement | null>(null)
const pollutionChartRef = ref<HTMLElement | null>(null)
const indexChartRef = ref<HTMLElement | null>(null)
const trendChartRef = ref<HTMLElement | null>(null)
const compositionChartRef = ref<HTMLElement | null>(null)

// 数据初始化
const monitorData = ref({
  aqi: 135,
  details: [
    { name: 'PM2.5', value: 3.5 },
    { name: 'PM10', value: 2.6 },
    { name: 'SO2', value: 3.0 },
    { name: 'NO2', value: 2.0 }
  ]
})

const mapControls = [
  { id: '2d', name: '2D' },
  { id: '3d', name: '3D' },
  { id: 'satellite', name: '卫星' },
  { id: 'road', name: '路网' }
]

// 定时器
let timer: number

onMounted(async () => {
  // 初始化地图
  if (mapContainer.value) {
    const map = await initMap(mapContainer.value, {
      ...MAP_CONFIG,
      ...AMAP_CONFIG
    })
  }

  // 初始化图表
  initCharts({
    pollutionChart: pollutionChartRef.value,
    indexChart: indexChartRef.value,
    trendChart: trendChartRef.value,
    compositionChart: compositionChartRef.value
  })

  // 启动定时器
  timer = setInterval(() => {
    currentTime.value = dayjs().format('YYYY-MM-DD HH:mm:ss')
    monitorStore.fetchData()
  }, 5 * 60 * 1000)
})

onUnmounted(() => {
  clearInterval(timer)
})

// 地图控制处理
const handleMapControl = (type: string) => {
  // 实现地图切换逻辑
}
</script>

<style lang="scss" scoped>
.monitor-dashboard {
  width: 100vw;
  height: 100vh;
  background-color: #000;
  color: #fff;
  padding: 20px;
  box-sizing: border-box;

  .dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;

    h1 {
      font-size: 24px;
      margin: 0;
    }
  }

  .dashboard-content {
    display: grid;
    grid-template-columns: 25% 50% 25%;
    gap: 20px;
    height: calc(100% - 60px);
  }

  .panel-item {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 4px;
    padding: 15px;
    margin-bottom: 20px;

    h3 {
      margin: 0 0 15px 0;
      font-size: 16px;
      color: #0ff;
    }
  }

  .map-container {
    position: relative;
    height: 100%;
    
    .map {
      width: 100%;
      height: 100%;
      border-radius: 4px;
    }

    .map-controls {
      position: absolute;
      top: 10px;
      right: 10px;
      display: flex;
      gap: 10px;

      button {
        background: rgba(0,0,0,0.7);
        border: 1px solid #0ff;
        color: #0ff;
        padding: 5px 10px;
        cursor: pointer;
        
        &:hover {
          background: rgba(0,255,255,0.2);
        }
      }
    }
  }

  .camera-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;

    .camera-item {
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 4px;
      }
    }
  }

  .chart-container {
    height: 200px;
  }
}
</style>